<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { addRole } from '@/api/platform-management';

  const form = ref({
    id: '',
    text: '',
  });
  // 状态
  const status = ref('正常');

  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (booleanStore.num === 16) showDrawer.value = newValue;
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      form.value.id = '';
      form.value.text = '';
      booleanStore.toggleBool(16);
    }
  }
  function handleCancel() {
    form.value.id = '';
    form.value.text = '';
    booleanStore.toggleBool(16);
  }
  async function handleSubmit() {
    const data = await addRole(form.value);
    console.log(data);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '添加成功',
        closable: true,
      });
      booleanStore.toggleBool(16);
    } else {
      Notification.error({
        title: '失败',
        content: '添加失败',
        closable: true,
      });
      booleanStore.toggleBool(16);
    }
    form.value.id = '';
    form.value.text = '';
    booleanStore.watchUpdate(24);
  }
</script>

<template>
  <a-drawer
    :width="450"
    :height="340"
    :visible="showDrawer"
    placement="right"
    unmount-on-close
    :footer="false"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
  >
    <template #title> 新增角色 </template>
    <div>
      <a-form :model="form" :style="{ width: '400px' }" @submit="handleSubmit">
        <a-form-item field="name" label="角色编号:">
          <a-input v-model="form.id" placeholder="请输入角色编号" />
        </a-form-item>
        <a-form-item field="name" label="角色名称:">
          <a-input v-model="form.text" placeholder="请输入角色名称" />
        </a-form-item>
        <a-form-item field="name" label="状态:">
          <a-select v-model="status">
            <a-option>正常</a-option>
            <a-option>停用</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" class="add">添加</a-button>
          <a-button html-type="reset" class="clear">清空</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
